<template>
	<el-dialog :visible.sync="options.showDialog" width="800px" class="evalDialog">
		<div id="print" ref="contain">
			<h3 style="line-height: 60px;font-size: 18px;letter-spacing: 2px;font-weight: bold;padding: 10px 0 0 0;text-align: center;">个体商户注册信息</h3>
			<ul style="width: 600px;margin: 0 auto 20px;list-style: none;">
				<li style="line-height: 40px;overflow: hidden;">
					<span style="float: left;width: 110px;">姓名：</span><span style="float: left;">{{userInfo.userName}}</span>
				</li>
				<li style="line-height: 40px;overflow: hidden;">
					<span style="float: left;width: 110px;">手机号码：</span><span style="float: left;">{{userInfo.telenum}}</span>
				</li>
				<li style="line-height: 40px;overflow: hidden;">
					<span style="float: left;width: 110px;">身份证：</span><span style="float: left;">{{userInfo.cardnum}}</span>
				</li>
				<li style="line-height: 40px;overflow: hidden;">
					<span style="float: left;width: 110px;">公司名称：</span><span style="float: left;">{{userInfo.applicantCompany}}</span>
				</li>
				<li style="line-height: 40px;overflow: hidden;">
					<span style="float: left;width: 110px;">经营范围：</span>
					<ul style="float: left;list-style: none;overflow: hidden;width: 480px;">
						<li v-for="(item,index) in userInfo.industryList" style="list-style: none;overflow: hidden;line-height: 40px;" :key="index">{{item}}</li>
					</ul>
				</li>
				<li style="line-height: 40px;overflow: hidden;">
					<span style="float: left;width: 110px;vertical-align: top;">身份证正反面：</span><br>
					<span @click="dialogVisible = true;dialogImageUrl = userInfo.identitya;" style="width: 240px;height: 150px;float: left;overflow: hidden;margin: 20px;text-align: center;">
						<img crossorigin="anonymous" :src="userInfo.identityaBase64" alt="" style="width: 180px;text-indent: 30px;text-align: center;max-width: 100%;">
					</span>
					<span @click="dialogVisible = true;dialogImageUrl = userInfo.identityb;" style="width: 240px;height: 150px;float: left;overflow: hidden;margin: 20px;text-align: center;">
						<img crossorigin="anonymous" :src="userInfo.identitybBase64" alt="" style="width: 180px;text-indent: 30px;max-width: 100%;">
					</span>
				</li>
				<li v-if="nav == 1" style="overflow: hidden;">
					<span style="float: left;width: 110px;vertical-align: top;">电子营业执照：</span><br>
					<span @click="dialogVisible = true;dialogImageUrl = userInfo.serviceCharge;" style="width: 240px;height: 150px;float: left;overflow: hidden;margin: 20px;text-align: center;">
						<img crossorigin="anonymous" :src="userInfo.serviceChargeBase64" style="width: 180px;text-indent: 30px;max-width: 100%;">
					</span>
				</li>
			</ul>
		</div>
		
		<el-dialog :visible.sync="dialogVisible" width="600px" :modal="false">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
		<div class="print">
			<el-button type="primary" size="mini" @click="exportReportTemplet('个体商户注册信息')">导出</el-button>
		</div>
	</el-dialog>
</template>
<!-- <script src="../../assets/jquery.wordexport.js"></script> -->
<script>
import { saveAs } from '../../assets/FileSaver.js'
import { zz } from '../../assets/jquery.wordexport.js'
export default{
	props:{
		options:{require: true,type: Object},
		nav:{type: Number,require: true}
	},
	data(){
		return{
			userInfo:{
				/* userName: '张三',										//姓名
				telenum: '13434343434',									//手机号码
				cardnum: '315151515151515',								//身份证号码
				applicantCompany: '天都人力资源有限公司',					//公司名称
				industry: '物流',										//行业
				identitya: 'https://tiandufacai-1259220846.cos.ap-shanghai.myqcloud.com/newimg/766661474528526336.jpg',
				identityaBase64: '',
				identityb: 'https://tiandufacai-1259220846.cos.ap-shanghai.myqcloud.com/newimg/766661474528526336.jpg',
				identitybBase64: '',
				serviceCharge: 'https://tiandufacai-1259220846.cos.ap-shanghai.myqcloud.com/newimg/766661474528526336.jpg', 
				serviceChargeBase64: '',
				*/
			},
			dialogImageUrl: '',
			dialogVisible: false
		}
	},
	methods:{
		/* 导出word功能 */
		exportReportTemplet(fileName) {
			/* zz();
			this.jQuery("#print").wordExport(); */
			var staticz = {
			    mhtml: {
			        top: "Mime-Version: 1.0\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n<!DOCTYPE html>\n<html>\n_html_</html>",
			        head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n",
			        body: "<body>_body_</body>"
			    }
			};
			var options = {
			    maxWidth: 624
			};
			// Clone selected element before manipulating it
			var markup = this.jQuery("#print").clone();
				
			// Remove hidden elements from the output
			markup.each(()=> {
			    var self = this.jQuery("#print");
			    if (self.is(':hidden'))
			        self.remove();
			});
				
			// Embed all images using Data URLs
			var images = Array();
			var img = markup.find('img');
			for (var i = 0; i < img.length; i++) {
			    // Calculate dimensions of output image
			    var w = Math.min(img[i].width, options.maxWidth);
			    var h = img[i].height * (w / img[i].width);
			    // Create canvas for converting image to data URL
			    var canvas = document.createElement("CANVAS");
			    canvas.width = w;
			    canvas.height = h;
			    // Draw image to canvas
			    var context = canvas.getContext('2d');
			    context.drawImage(img[i], 0, 0, w, h);
			    // Get data URL encoding of image
			    var uri = canvas.toDataURL("image/png");
			    this.jQuery(img[i]).attr("src", img[i].src);
			    img[i].width = w;
			    img[i].height = h;
			    // Save encoded image to array
			    images[i] = {
			        type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")),
			        encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")),
			        location: this.jQuery(img[i]).attr("src"),
			        data: uri.substring(uri.indexOf(",") + 1)
			    };
			}
				
			// Prepare bottom of mhtml file with image data
			var mhtmlBottom = "\n";
			for (var i = 0; i < images.length; i++) {
			    mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n";
			    mhtmlBottom += "Content-Location: " + images[i].location + "\n";
			    mhtmlBottom += "Content-Type: " + images[i].type + "\n";
			    mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "\n\n";
			    mhtmlBottom += images[i].data + "\n\n";
			}
			mhtmlBottom += "--NEXT.ITEM-BOUNDARY--";
				
			//TODO: load css from included stylesheet
			var styles = "";
				
			// Aggregate parts of the file together
			var fileContent = staticz.mhtml.top.replace("_html_", staticz.mhtml.head.replace("_styles_", styles) + staticz.mhtml.body.replace("_body_", markup.html())) + mhtmlBottom;
				
			// Create a Blob with the file contents
			var blob = new Blob([fileContent], {
			    type: "application/msword;charset=utf-8"
			});
			console.log(blob);
			saveAs(blob, fileName + ".docx");
		},
		getUrl(obj){
		　　 //这是网上的一张图片链接
			var url = this.userInfo[obj];
			this.getBase64(url).then((base64) => {
				// this.userInfo[obj + 'Base64'] = base64;
				this.$set(this.userInfo,[obj + 'Base64'],base64);
			},(err) => {
				//打印异常信息
				/* this.$message({
					message: err,
					type: 'warning'
				}) */
			});                        
		},
		//传入图片路径，返回base64
		getBase64(img){
			var image = new Image();
			image.crossOrigin = 'anonymous';
			image.src = img;
			var deferred=this.jQuery.Deferred();
			if(img){
				image.onload = ()=>{
					deferred.resolve(this.getBase64Image(image));//将base64传给done上传处理
				}
				return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
			}
		},
		getBase64Image(img,width,height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
			var canvas = document.createElement("canvas");
			canvas.width = width ? width : img.width/2;
			canvas.height = height ? height : img.height/2;
			
			var ctx = canvas.getContext("2d");
			ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
			var dataURL = canvas.toDataURL();
			return dataURL;
		}
	},
	watch:{
		'options.showDialog'(){
			if(this.options.showDialog){
				this.userInfo = this.options.userInfo;
				if(this.userInfo.identitya){
					this.getUrl('identitya');
				}
				if(this.userInfo.identityb){
					this.getUrl('identityb');
				}
				if(this.userInfo.serviceCharge){
					this.getUrl('serviceCharge');
				}
			}
		},
	}
}
</script>

<style scoped="scoped">
.evalDialog{min-height: 700px;}
/* .evalDialog .company-name{line-height: 60px;font-size: 18px;letter-spacing: 2px;font-weight: bold;padding: 10px 0 0 0;text-align: center;} */
/* .content-msg{width: 600px;margin: 0 auto 20px;}
.content-msg .msg-item{line-height: 40px;overflow: hidden;}
.msg-item .til{float: left;width: 120px;}
.msg-item .value{float: left;}
.msg-item .img{width: 180px;height: 150px;margin: 20px;display: inline-block;overflow: hidden;}
.msg-item .img img{width: 100%;} */
.print{text-align: center;padding: 20px 0;}
</style>
